<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <mh-header headName="我的相册"> </mh-header>
      <div>
        <input @change="fileChange($event)" type="file" ref="upload_file" multiple style="display: none"/>
        <div class="image-list flex-bt">
          <div class="upload-box" :style="{height: (boxHeight ? boxHeight:'')}" @tap="choosePic">
            <div class="upload-inner">
              <span class="mui-icon mui-icon-plusempty"></span>
            </div>
          </div>
          <div class="img-item" v-for="(item, index) in imgList" :key="index">
            <span class="ico-move" @tap="removePic(index)">-</span>
            <div class="pic-box" :style="{height: (boxHeight ? boxHeight:'')}">
              <img :src="item.image" alt="相片">
            </div>
          </div>
          <div class="img-item"></div>
          <div class="img-item"></div>
        </div>
      </div>
    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  export default {
    name: "my-gallery",
    components: {
      MhHeader
    },
    data () {
      return {
        boxHeight: '',
        size: 0,
        limit:6,
        imgList: [
          {
            id: '1',
            imgSrc: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1700510748,1888429117&fm=26&gp=0.jpg'
          },
          {
            id: '2',
            imgSrc: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2082925491,3690093855&fm=26&gp=0.jpg'
          },
          {
            id: '3',
            imgSrc: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3320410772,2527585586&fm=26&gp=0.jpg'
          }
        ]
      }
    },
    mounted () {
      // console.log(document.getElementsByClassName('img-item')[0].clientWidth);
      this.boxHeight = document.getElementsByClassName('img-item')[0].clientWidth + 'px';
    },
    methods: {
      fileChange(el) {
        if (!el.target.files[0].size) return;
        this.fileList(el.target);
        el.target.value = ''
      },
      choosePic () {
        this.$refs.upload_file.click();
      },
      removePic (index) {
        let _this = this;
        let btnArray = ['取消', '确定'];
        mui.confirm('确认要删除照片吗？', '提示', btnArray, function(e) {
          // _this.size = _this.size - _this.imgList[index].file.size;//总大小
          if (e.index === 1) {
            _this.imgList.splice(index, 1);
            // if (_this.limit !== undefined) _this.limit = _this.limit - _this.imgList.length;
          } else {

          }
        })
      },
      fileList(fileList) {
        let files = fileList.files;
        for (let i = 0; i < files.length; i++) {
          //判断是否为文件夹
          if (files[i].type !== '') {
            this.fileAdd(files[i]);
          } else {
            //文件夹处理
            this.folders(fileList.items[i]);
          }
        }
      },
      //文件夹处理
      folders(files) {
        let _this = this;
        //判断是否为原生file
        if (files.kind) {
          files = files.webkitGetAsEntry();
        }
        files.createReader().readEntries(function (file) {
          for (let i = 0; i < file.length; i++) {
            if (file[i].isFile) {
              _this.foldersAdd(file[i]);
            } else {
              _this.folders(file[i]);
            }
          }
        });

      },
      foldersAdd(entry) {
        let _this = this;
        entry.file(function (file) {
          _this.fileAdd(file)
        })
      },
      fileAdd(file) {
        if (this.limit !== undefined) this.limit--;
        if (this.limit !== undefined && this.limit < 0) return;
        //总大小
        this.size = this.size + file.size;
        //判断是否为图片文件
        if (file.type.indexOf('image') === -1) {
          mui.toast('请选择图片文件');
        } else {
          let reader = new FileReader();
          let image = new Image();
          let _this = this;
          reader.readAsDataURL(file);
          reader.onload = function () {
            file.src = this.result;
            image.onload = function(){
              let width = image.width;
              let height = image.height;
              file.width = width;
              file.height = height;
              console.log(file);
              _this.imgList.push({
                imgSrc: file.src
              });
              console.log( _this.imgList);
            };
            image.src= file.src;
          }
        }
      }
    },
    created(){
      let self = this;
      // MH_API.getAlbums({
      //   page: 1,
      //   limit: 10
      // }).then(res => {
      //   self.imgList = res.data;
      // })
      MH_API.getUserInfo({
        id: window.localStorage.getItem("userid")
      }).then(res => {
        if (res.status === 200) {
          self.imgList = res.data.images;
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .pic-box {
    @include mh-avatar-box(auto, 100%);
    border-radius: 0;
    background-color: #eee;
  }
  .upload-box {
    background-color: #eee;
    .upload-inner {
      padding: 2rem;
      @include center;
      text-align: center;
      background-color: #eee;
      overflow: hidden;
      span {@include sc(5rem, #dedede)}
    }
  }
  .img-item,.upload-box {
    position: relative;
    display: inline-block;
    width: 31%;
    height: 40%;
    margin: 0 auto .5rem;
  }
  .image-list {
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    padding: .5rem 1rem;
    background-color: #fff;
  }
  .ico-move {
    position: absolute;
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    line-height: 1.2rem;
    right: -.5rem;
    top: -.5rem;
    background-color: #fc5624;
    border-radius: 100%;
    text-align: center;
    @include sc(3rem, #fff);
  }
</style>
